<template>
  <div>
    <div @click="()=>drawer=true">
      <slot name="setting"/>
    </div>
    <el-drawer
      append-to-body
      title="系统设置"
      :visible.sync="drawer"
      size="300"
      direction="rtl">
      <div class="body">
        <el-switch
          v-model="persistence.type"
          @change="onChange($event,'type')"
          active-text="标签页"
          inactive-text="">
        </el-switch>
        <el-switch
          v-model="persistence.footer"
          @change="onChange($event,'footer')"
          active-text="底部"
          inactive-text="">
        </el-switch>
      </div>
    </el-drawer>
  </div>
</template>l

<script>
  import {mapState} from 'vuex';
  //系统设置
  export default {
    name: "Setting",
    data() {
      return {
        drawer: false,
      }
    },
    computed: {
      ...mapState(['persistence'])
    },
    methods: {
      onChange(value, type) {
        this.$store.commit('SYSTEM_SETTING', {value, type});
      }
    }
  }
</script>

<style scoped>
  .body {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
  }

  .body > div {
    margin-bottom: 15px;
  }
</style>
